<template>
    <div class="com-container">
        <div class="com-echart" ref="seller_ref">
        </div>
        <ReSize :comName="'seller'"></ReSize>
    </div>
</template>

<script setup>

import { onMounted,ref,computed,onUnmounted,defineExpose,watch } from 'vue';
import {getSellerDataService} from '@/api/index'
import { markRaw } from 'vue';
import ReSize from './ReSize.vue';
import { useThemeStore } from '@/stores';
const themeStore = useThemeStore()


const chartInstance = ref(null)
const seller_ref = ref(null)
const initChart=()=>{
    chartInstance.value=markRaw(echarts.init(seller_ref.value, themeStore.currentTheme))
    //分离option的思想，将数据与其他样式的配置分离开，便于维护
    const initOption = {
        title: {
            text: '商家销售统计',
            textStyle: {
                fontSize: 65
            },
            left: 20,
            top: 20,
        },
        grid: {
            top: '20%',
            left: '3%',
            containLabel: true  //距离包含坐标轴的文字
        },
        xAxis: {
            type: 'value'
        },
        yAxis: {
            type: 'category'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'line',
                z: 0,
                lineStyle: {
                    type: 'solid',
                    width: 66,
                    color: '#2d3443'
                }
            }
        },
        series: [
            {
                type: 'bar',
                barWidth: 66,
                label: {
                    show: true,
                    position: 'right',
                    color: 'white'
                },
                itemStyle: {
                    borderRadius: [0, 33, 33, 0],
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0,
                        [
                            { offset: 0, color: '#5052ee' },
                            { offset: 1, color: '#ab6ee5' }
                        ]
                    )
                }
            }
        ]

    }
    chartInstance.value.setOption(initOption)
    chartInstance.value.on('mouseover',()=>{
        clearInterval(timer.value)
    })
     chartInstance.value.on('mouseout', () => {
        startInterval()
    })
}
 

const showData = ref([])
const currentPage = ref(1)
const sellerValue=computed(()=>showData.value.map(e=>e.value))
const sellerName=computed(()=>showData.value.map(e=>e.name))
const updateChart=()=>{
    const start = (currentPage.value - 1) * 5
    const end = currentPage.value * 5
    showData.value = dataList.value.slice(start, end)
    const dataOption={
        yAxis:{
            data:sellerName.value
        },
        series:[
            { 
              data: sellerValue.value
            }
        ]

    }
    chartInstance.value.setOption(dataOption)
}

const timer = ref(null)
const startInterval = () => {
    if (timer.value) clearInterval(timer)
    timer.value = setInterval(() => {
        currentPage.value++
        if (currentPage.value > totalPage.value) currentPage.value = 1
        updateChart()
    }, 3000)
}


const dataList = ref([])
const totalPage=ref(0)
const getSellerData= (ret)=>{
    dataList.value=ret
    dataList.value.sort((a,b)=>a.value-b.value)
    totalPage.value=dataList.value.length%5===0? dataList.value.length/5: dataList.value.length / 5+1
    updateChart()
    startInterval()
}

const screenAdaptor=()=>{
    const titleFontSize=seller_ref.value.offsetWidth/100*3.6
    const adaptOption= {
        title: {
           
            textStyle: {
                fontSize: titleFontSize
            },
        },
        
        tooltip: {
            axisPointer: {
                lineStyle: {   
                    width: titleFontSize,
                }
            }
        },
        series: [
            {
                barWidth: titleFontSize,
                itemStyle: {
                    borderRadius: [0, titleFontSize/2, titleFontSize/2, 0],
                }
            }
        ]

    }
    chartInstance.value.setOption(adaptOption)
    chartInstance.value.resize()
}

SocketService.registerCallBack('sellerData', getSellerData)

//暴露screenAdaptor供外部使用
defineExpose({
    screenAdaptor
})

watch(() => themeStore.currentTheme, () => {
    chartInstance.value.dispose()
    initChart()
    updateChart()
    screenAdaptor()
})

onMounted(async()=>{
    initChart()
    // getSellerData()
    //发送数据
    SocketService.send({
        action:'getData',
        socketType:'sellerData',
        chartName:'seller',
        value:''
    })
    window.addEventListener('resize',screenAdaptor)
    screenAdaptor()
})
onUnmounted(()=>{
    clearInterval(timer.value)
    window.removeEventListener('resize', screenAdaptor)
    SocketService.unRegisterCallBack('sellerData')
})

</script>


<style scoped>
.com-container{
    position: relative;
}

</style>